<template>
    <div class="wrap">
  		<header-v></header-v>
  		
  		<div class="pro-content">
  		    <div class="title">
                <img src="../../assets/bcfq.png" />
                <p>NEW PRODUCTS</p>
                <router-link to="/">最新产品</router-link>
            </div>
            <div class="menu">
                <ul class="primenu" v-if="primenu">
                    <li> <router-link to="/">面部护理</router-link> <span @click="next('none')"> > </span></li>
                    <li> <router-link to="/">唇彩唇线</router-link> <span @click="next('tow')"> > </span></li>
                    <li> <router-link to="/">特殊用途</router-link> <span @click="next('three')"> > </span></li>
                    <li> <router-link to="/">化妆用具</router-link> <span @click="next('four')"> > </span></li>
                    <li> <router-link to="/">眉眼修饰</router-link> <span @click="next('five')"> > </span></li>
                    <li> <router-link to="/">男士系列</router-link> <span @click="next('six')"> > </span></li>
                </ul>

                <ul v-if="none" class="Submenu">
                    <li class="prev" @click="prev('none')"></li>
                    <li><router-link to="/">美白系列</router-link></li>
                    <li><router-link to="/">补水系列</router-link></li>
                </ul>
                <ul v-if="tow" class="Submenu">
                    <li class="prev" @click="prev('tow')"></li>
                    <li><router-link to="/">唇膏</router-link></li>
                    <li><router-link to="/">唇线</router-link></li>
                </ul>
                <ul v-if="three" class="Submenu">
                    <li class="prev" @click="prev('three')"></li>
                    <li><router-link to="/">祛斑</router-link></li>
                    <li><router-link to="/">祛痘</router-link></li>
                </ul>
                <ul v-if="four" class="Submenu">
                    <li class="prev" @click="prev('four')"></li>
                    <li><router-link to="/">眉笔</router-link></li>
                    <li><router-link to="/">眼线笔</router-link></li>
                </ul>
                <ul v-if="five" class="Submenu">
                    <li class="prev" @click="prev('five')"></li>
                    <li><router-link to="/">眼霜</router-link></li>
                    <li><router-link to="/">眼影</router-link></li>
                    <li><router-link to="/">睫毛膏</router-link></li>
                </ul>
                <ul v-if="six" class="Submenu">
                    <li class="prev" @click="prev('six')"></li>
                    <li><router-link to="/">面部</router-link></li>
                    <li><router-link to="/">剃须护理</router-link></li>
                </ul>
            </div>
            <div class="con">
                <grid :rows="2">
                    <grid-item :label="'纷泽滋润唇膏巨星私藏系'" link="/" >
                        <img slot="icon" src="../../assets/51_alrm.jpg" alt="纷泽滋润唇膏巨星私藏系" />
                        <p class="old">市场价: <span>180.00</span></p>
                        <p class="money">价格: <span>160.00</span></p>
                    </grid-item>
                    <grid-item :label="'流光炫色唇彩'" link="/" >
                        <img slot="icon" src="../../assets/51_f9g4.jpg" alt='流光炫色唇彩' />
                        <p class="old">市场价: <span>300.00</span></p>
                        <p class="money">价格: <span>280.00</span></p>
                    </grid-item>
                </grid>
                <grid :rows="2">
                    <grid-item :label="'眉眼造型套盒'" link="/" >
                        <img slot="icon" src="../../assets/50_rit7.jpg" alt="眉眼造型套盒" />
                        <p class="old">市场价: <span>200.00</span></p>
                        <p class="money">价格: <span>170.00</span></p>
                    </grid-item>
                    <grid-item :label="'无限深活明肌角质精华液'" link="/" >
                        <img slot="icon" src="../../assets/49_x7id.jpg" alt='无限深活明肌角质精华液' />
                        <p class="old">市场价: <span>280.00</span></p>
                        <p class="money">价格: <span>220.00</span></p>
                    </grid-item>
                </grid>
                <div class="page">
                    <router-link to="/" class="num"> < </router-link>
                    <router-link to="/" class="num active">1</router-link>
                    <router-link to="/" class="num"> > </router-link>
                </div>
            </div>
  		</div>
  		
  		<footer-v></footer-v>
  </div>
</template>


<script>
import header from '../public/header'
import footer from '../public/footer'
import { Grid, GridItem } from 'vux'

export default {
	
  components: {
  	headerV : header,
  	footerV : footer,
    Grid,GridItem
  },
  data () {
    return {
        primenu : true,
        none : false,
        tow : false,
        three : false,
        four : false,
        five : false,
        six : false
    }
  },
  methods : {
    next (obj){
        if(obj == 'none'){
            this.none = true;
            this.primenu = false;
        }else if(obj == 'tow'){
            this.tow = true;
            this.primenu = false;
        }else if(obj == 'three'){
            this.three = true;
            this.primenu = false;
        }else if(obj == 'four'){
            this.four = true;
            this.primenu = false;
        }else if(obj == 'five'){
            this.five = true;    
            this.primenu = false;       
        }else if(obj == 'six'){
            this.six = true;
            this.primenu = false;
        }
    },
    prev (obj){
        if(obj == 'none'){
            this.none = false;
            this.primenu = true;
        }else if(obj == 'tow'){
            this.tow = false;
            this.primenu = true;
        }else if(obj == 'three'){
            this.three = false;
            this.primenu = true;
        }else if(obj == 'four'){
            this.four = false;
            this.primenu = true;
        }else if(obj == 'five'){
            this.five = false;    
            this.primenu = true;       
        }else if(obj == 'six'){
            this.six = false;
            this.primenu = true;
        }
    }
  }
}
</script>


<style type="text/css">
	/* Product.style */

    .pro-content .weui-grid__label span{color:#5A5A5A; font-weight:bold; line-height:0.3rem; font-size:0.13rem;}
    .pro-content .weui-grids .weui-grid{padding:0 !important; width:47% !important; margin-bottom:0.1rem;}
    .pro-content .weui-grids a:nth-of-type(1n){ margin-left:0.03rem; }
    .pro-content .weui-grids a:nth-of-type(2n){ margin-left:0.126rem;}
    .pro-content .weui-grid__icon{height:1.48rem !important; width:100% !important; margin:0 !important;}
    .pro-content .title{ text-align:center; margin:0.2rem 0 0.2rem 0;}
    .pro-content .title p{color:#f55e6a; font-size:0.18rem; font-weight:bold; line-height:0.2rem; }
    .pro-content .title img{width:100%;}
    .pro-content .title a{ font-size:0.2rem; font-weight:bold; color:#282828;}

    .pro-content .menu{ -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.5);box-shadow:0 2px 5px rgba(0,0,0,0.5); margin-bottom:0.2rem; overflow:hidden; }
    .pro-content .primenu{background:#f55e6a; padding:0.15rem 0.1rem; border-bottom:0.01rem solid #fff;}
    .pro-content .primenu a{color:#fff; font-size:0.15rem; line-height:0.3rem; }
    .pro-content .menu a:hover{ color:#ed2030;}
    .pro-content .primenu span{float:right; color:#fff; font-size:0.15rem; line-height:0.3rem; cursor:pointer;}
    .pro-content .Submenu a{ color:#fff; font-size:0.15rem; line-height:0.3rem;}
    .pro-content .Submenu{ width:100%; overflow:hidden; background:rgb(201,0,24);}
    .pro-content .Submenu{border-bottom:0.01rem solid #fff;}
    .pro-content .Submenu .prev{ background-size:0.05rem 0.1rem !important; cursor:pointer; float:left; width: 0.14rem; height:2.1rem; display:block;  margin-right:0.05rem; background:url(../../assets/arrow.png) no-repeat 50% 50% rgba(0,0,0,.4);}

    .pro-content .con { text-align:center; }
    .pro-content .con .old,.pro-content .con .money{ color:#ACACAC; line-height:0.22rem; }
    .pro-content .old span{ color:#5A5A5A; text-decoration:line-through;}
    .pro-content .money span{ color:#FF3C00; }
</style>
